// flex方向变量
$flex-direction-list: row, col;
$justify-content-list: start, center, end, between, evenly;
$align-items-list: start, center, end;

$flex-direction-map: (
  'row': row,
  'col': column
);

$justify-content-map: (
  'start': flex-start,
  'center': center,
  'end': flex-end,
  'between': space-between,
  'evenly': space-evenly
);

$align-items-map: (
  'start': flex-start,
  'center': center,
  'end': flex-end
);

@each $d in $flex-direction-list {
  .flex-#{$d} {
    display: flex;
    flex-direction: map-get($flex-direction-map, $d);
  }
  @each $j in $justify-content-list {
    .flex-#{$d}-#{$j} {
      display: flex;
      flex-direction: map-get($flex-direction-map, $d);
      justify-content: map-get($justify-content-map, $j);
      align-items: center;
    }
    @if ($d == row) {
      .flex-#{$j} {
        display: flex;
        flex-direction: row;
        justify-content: map-get($justify-content-map, $j);
        align-items: center;
      }
    }
    @each $a in $align-items-list {
      .flex-#{$d}-#{$j}-#{$a} {
        display: flex;
        flex-direction: map-get($flex-direction-map, $d);
        justify-content: map-get($justify-content-map, $j);
        align-items: map-get($align-items-map, $a);
      }
      @if ($d == row) {
        .flex-#{$j}-#{$a} {
          display: flex;
          flex-direction: row;
          justify-content: map-get($justify-content-map, $j);
          align-items: map-get($align-items-map, $a);
        }
      }
    }
  }
}

// 使用
// .flex
// .flex-start  .flex-between
// .flex-row-start  .flex-row-between
// .flex-row-start-start  .flex-row-start-center  .flex-row-start-end  .flex-row-between-center ...
// .flex-col-start-start  .flex-col-center-center  .flex-col-start-center  .flex-col-between-center ...

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
}
